import Taro, { Component } from '@tarojs/taro'
import { View, Swiper, SwiperItem } from '@tarojs/components'

import Channel from '@components/channel'
import XHead from '@components/head'

import classify from '@assets/images/classify.png'
import program from '@assets/images/program.png'
import pay from '@assets/images/pay.png'
import tv from '@assets/images/tv.png'
import arrow from '@assets/images/arrow-right.png'

import './common.scss'

class Broadcaster extends Component {
  constructor(props) {
    super(props);
    this.state = {
      personalChannels: [
        {
          imgSrc: classify,
          text: '私人FM'
        },
        {
          imgSrc: program,
          text: '电台排行'
        },
        {
          imgSrc: pay,
          text: '付费精品'
        },
        {
          imgSrc: tv,
          text: '音乐课堂'
        }
      ]
    }
  }
  render() { 
    return (
      <View className='tab-1'>
        {/* 轮播图 */}
        <Swiper
          className='test-h'
          indicatorColor='#999'
          indicatorActiveColor='#DC4238'
          circular
          indicatorDots
          interval='3000'
          autoplay
        >
          <SwiperItem>
            <View className='demo-text-1'>1</View>
          </SwiperItem>
          <SwiperItem>
            <View className='demo-text-2'>2</View>
          </SwiperItem>
          <SwiperItem>
            <View className='demo-text-3'>3</View>
          </SwiperItem>
        </Swiper>
        {/* 频道 */}
        <Channel channels={this.state.personalChannels} />
        {/* 小栏目 */}
        <View className='column'>
          <XHead title='推荐歌单' src={arrow} />
          <View className='column-list'>
            
          </View>
        </View>
      </View>
    )
  }
}
 
export default Broadcaster